<!doctype html>
<html>
    <head>
    	<title>随易游戏-图片转base64</title>
		<meta charset="utf8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="comm.css" />
		<style>
			body{padding:20px;}
			#img_to_base64{position:relative;}
			#textarea{border:1px solid #ddd;height:300px;padding:10px;word-wrap:break-word;}
			#button{border:1px solid #ddd;width:100%;height:50px;line-height:50px;text-align:center;margin-bottom:20px;cursor:pointer;}
			#file{position:absolute;height:100%;width:100%;opacity:0;-moz-opacity:0;cursor:pointer;}
			#text{position:absolute;}
			#file_div{position:relative;height:35px;line-height:35px;padding:0 10px;border:1px solid #ddd;margin-bottom:20px;}
			filter:alpha(opacity=50);}
		</style>
	</head>
	<body id="body">
		<div class="img_to_base64" id="img_to_base64">
			<div id="file_div"><input type="file" id="file"><span id="text">选择图片</span></div>
			<span id="button">IMAGE CONVERT BASE64</span>
			<textarea id="textarea" style="width:100%;min-height:300px"></textarea>
		</div>
		<script>
			document.addEventListener('DOMContentLoaded',function(){
				document.getElementById('file').addEventListener('change',function(e){
					document.getElementById('file_div').innerText = e.srcElement.files[0].name;
					document.getElementById('button').addEventListener('click',function () {
						var reader = new FileReader();
						reader.readAsDataURL(e.srcElement.files[0]);
						reader.onload = function(event){
							document.getElementById('textarea').innerText = event.srcElement.result;
						}
						return true;
					}, false);
				});
				document.getElementById('textarea').addEventListener('click',function(){
					document.getElementById('textarea').select();
				},false);
			});
		</script>
	</body>
</html>